<template>
  <div class="payment-container container">
    <div class="page-title">
      <h2>订单支付</h2>
    </div>
    
    <div class="payment-card card" v-loading="loading">
      <div v-if="orderInfo">
        <el-alert
          title="请在30分钟内完成支付，超时订单将自动取消"
          type="warning"
          :closable="false"
          show-icon>
        </el-alert>
        
        <div class="order-info">
          <h3>订单信息</h3>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="订单编号">{{ orderInfo.orderNo }}</el-descriptions-item>
            <el-descriptions-item label="车辆名称">{{ orderInfo.vehicleName }}</el-descriptions-item>
            <el-descriptions-item label="下单时间">{{ orderInfo.orderTime | formatDate }}</el-descriptions-item>
            <el-descriptions-item label="支付金额">
              <span class="price">¥{{ orderInfo.amount }}</span>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        
        <div class="payment-methods">
          <h3>支付方式</h3>
          <el-radio-group v-model="paymentMethod">
            <el-radio :label="1">
              <i class="el-icon-money" style="color: #1296db; font-size: 20px; margin-right: 5px;"></i>
              支付宝
            </el-radio>
            <el-radio :label="2">
              <i class="el-icon-chat-dot-round" style="color: #09bb07; font-size: 20px; margin-right: 5px;"></i>
              微信支付
            </el-radio>
          </el-radio-group>
        </div>
        
        <div class="payment-action">
          <el-button type="primary" size="large" @click="handlePayment" :loading="submitting">
            立即支付 ¥{{ orderInfo.amount }}
          </el-button>
          <el-button @click="goBack">返回</el-button>
        </div>
      </div>
      
      <el-empty v-else description="订单信息不存在或已过期"></el-empty>
    </div>
  </div>
</template>

<script>
import { getOrderDetail, payOrder } from '@/api/order'
import { parseTime } from '@/utils'

export default {
  name: 'OrderPayment',
  filters: {
    formatDate(time) {
      if (!time) return '暂无数据';
      try {
        if (typeof time === 'string') {
          return parseTime(new Date(time), '{y}-{m}-{d} {h}:{i}:{s}');
        }
        return parseTime(time, '{y}-{m}-{d} {h}:{i}:{s}');
      } catch (error) {
        console.error('日期格式化错误:', error, time);
        return '格式错误';
      }
    }
  },
  data() {
    return {
      orderNo: '',
      orderInfo: null,
      paymentMethod: 1, // 默认支付宝
      loading: false,
      submitting: false
    }
  },
  created() {
    this.orderNo = this.$route.params.orderNo
    if (this.orderNo) {
      this.fetchOrderDetail()
    }
  },
  methods: {
    fetchOrderDetail() {
      this.loading = true
      getOrderDetail(this.orderNo)
        .then(response => {
          if (response.code === 200) {
            this.orderInfo = response.data
            // 处理日期
            if (this.orderInfo.orderTime) {
              try {
                this.orderInfo.orderTime = new Date(this.orderInfo.orderTime)
              } catch (error) {
                console.error('日期转换错误:', error)
              }
            }
          } else {
            this.$message.error(response.message || '获取订单详情失败')
          }
        })
        .catch(error => {
          console.error('获取订单详情失败', error)
          this.$message.error('获取订单详情失败，请检查网络连接')
        })
        .finally(() => {
          this.loading = false
        })
    },
    handlePayment() {
      if (!this.orderInfo) {
        this.$message.error('订单信息不存在')
        return
      }
      
      this.submitting = true
      
      // 调用支付API
      payOrder(this.orderNo, this.paymentMethod)
        .then(response => {
          if (response.code === 200) {
            this.$message.success('支付成功')
            // 支付成功后跳转到订单列表
            setTimeout(() => {
              this.$router.push('/order/list')
            }, 1500)
          } else {
            this.$message.error(response.message || '支付失败')
          }
        })
        .catch(error => {
          console.error('支付失败', error)
          this.$message.error('支付失败，请稍后重试')
        })
        .finally(() => {
          this.submitting = false
        })
    },
    goBack() {
      this.$router.push('/order/list')
    }
  }
}
</script>

<style lang="scss" scoped>
.payment-container {
  padding: 20px 0;
  
  .page-title {
    margin-bottom: 20px;
    
    h2 {
      font-size: 24px;
      font-weight: 500;
      color: #303133;
      margin: 0;
    }
  }
  
  .payment-card {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 20px;
    
    .el-alert {
      margin-bottom: 20px;
    }
    
    .order-info {
      margin-bottom: 30px;
      
      h3 {
        margin-bottom: 15px;
        font-weight: 500;
      }
      
      .price {
        color: #f56c6c;
        font-size: 18px;
        font-weight: bold;
      }
    }
    
    .payment-methods {
      margin-bottom: 30px;
      
      h3 {
        margin-bottom: 15px;
        font-weight: 500;
      }
      
      .payment-icon {
        width: 24px;
        height: 24px;
        margin-right: 5px;
        vertical-align: middle;
      }
      
      .el-radio {
        margin-right: 30px;
        margin-bottom: 10px;
      }
    }
    
    .payment-action {
      margin-top: 30px;
      text-align: center;
      
      .el-button {
        margin: 0 10px;
      }
    }
  }
}
</style> 